<template>
    <div class="app-container">
        <h4>报修记录</h4>
        <div>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-select v-model="selectInfo.eqptType" placeholder="全部" style="width:100%">
                        <!--<el-option v-for="list in rp_data.optionsType" :key="list.value" :label="list.label" :value="list.value"></el-option>-->
                        <el-option label="全部" value="0"></el-option>
                        <el-option label="服务器" value="1"></el-option>
                        <el-option label="交换机" value="2"></el-option>
                        <el-option label="防火墙" value="4"></el-option>
                        <el-option label="CPE" value="5"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <el-select v-model="selectInfo.repairState" placeholder="全部" style="width:100%">
                        <!--<el-option v-for="list in rp_data.optionsRepair" :key="list.value" :label="list.label" :value="list.value"></el-option>-->
                        <el-option label="全部" value="1"></el-option>
                        <el-option label="修复中" value="0"></el-option>
                        <el-option label="已修复" value="1"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="selectInfo.snId" placeholder="请输入SN号"></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <el-button type="primary" @click="filterData()">筛选结果</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple-light">
                        <el-date-picker v-model="selectInfo.date" type="daterange" placeholder="选择日期范围" ></el-date-picker>
                    </div>
                </el-col>
                <el-col :span="6" :offset="12" justify="space-between">
                    <div class="grid-content bg-purple-light">
                        <el-button @click="derive()">导出</el-button>
                        <el-button @click="createRepair()">新增记录</el-button>
                    </div>
                </el-col>
            </el-row>
            <!-- 报修记录表 -->
            <el-table :data="infos.tableData" border style="width: 100%;margin:20px 0">
                <el-table-column label="序号" width="80px">
                    <template scope="scope">
                        <span>{{scope.$index+1}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="报修时间" min-width="180px">
                    <template scope="scope">
                        <span>{{scope.row.repairDate}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="设备类型" min-width="130px">
                    <template scope="scope">
                        <span>{{scope.row.eqptType}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="SN编号" min-width="120px">
                    <template scope="scope">
                        <span>{{scope.row.snId}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="保修状态" min-width="140px">
                    <template scope="scope">
                        <span>{{scope.row.repairState}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="解决方案" min-width="316px">
                    <template scope="scope">
                        <span>{{scope.row.solution}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="160px">
                    <template scope="scope">
                        <el-button size="small" type="success" @click="editEptRoom(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteConfirm(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            
            <!-- 分页条 -->
            <div class="block">
            <el-pagination style="padding:0;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageConfig.curPage" :page-size="pageSize" layout="prev, pager, next, jumper" :total="pageConfig.total">
            </el-pagination>
                
            </div>
    
            <!-- 报修编辑框 -->
            <el-dialog title="新增报修记录" :visible.sync="addRecordsVisible">
                <el-form :model="repairInfos" :rules="rules" ref="repairInfos" v-if="addRecordsVisible">
                    <el-form-item label="报修时间" :label-width="formLabelWidth" prop="repairDate" v-if="this.repairInfos.type === 'new'">
                        <el-date-picker type="date" placeholder="选择日期" v-model="repairInfos.repairDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="报修时间" :label-width="formLabelWidth" v-else>
                        <el-input placeholder="选择日期" v-model="repairInfos.repairDate" style="width: 100%;" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="设备类型" :label-width="formLabelWidth" prop="eqptType">
                        <el-select v-model="repairInfos.eqptType" placeholder="">
                            <el-option label="服务器" value="1"></el-option>
                            <el-option label="交换机" value="2"></el-option>
                            <el-option label="防火墙" value="4"></el-option>
                            <el-option label="CPE" value="5"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="SN编号" :label-width="formLabelWidth" prop="snId">
                        <el-input v-model="repairInfos.snId" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="报修状态" :label-width="formLabelWidth" prop="repairState">
                        <el-select v-model="repairInfos.repairState" placeholder="">
                            <el-option label="修复中" value="0"></el-option>
                            <el-option label="已修复" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="解决方案" :label-width="formLabelWidth" prop="solution">
                        <el-input v-model="repairInfos.solution" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addRecordsVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitForm('repairInfos',repairInfos.type)">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<style>
.el-row {
    margin-bottom: 20px;
}

.el-select,
.el-date-editor--daterange.el-input {
    width: 100%;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-dialog--small {
    width: 30%;
}
</style>
<script>
export default {
    data() {
        return {
            infos: {
                tableData: []
            },
            addRecordsVisible: false,
            formLabelWidth: '80px',
            date1: '',
            repairInfos: {},
            selectInfov: {},
            rules: {
                repairDate: [
                    { type: "date", required: true, message: '请选日期', trigger: "change" }
                ],
                eqptType: [
                    { required: true, message: '请选设备类型' }
                ],
                snId: [
                    { required: true, message: '请输入SN编号', trigger: 'blur' }
                ],
                repairState: [
                    { required: true, message: '请选报修状态', trigger: 'change' }
                ],
                solution: [
                    { required: true, message: '请输入解决方案', trigger: 'blur' }
                ]
            },

            // 筛选条件
            selectInfos: {
                eqptType: '',
                repairState: '',
                snId: '',
                beginDate:'',
                endDate: '',
                date: ''
            },
            selectInfo: {
                eqptType: '',
                repairState: '',
                snId: '',
                beginDate:'',
                endDate: '',
                date: ''
            },
            addrDatas: {
                facility: [],
                condition: []
            },
            pageConfig: {
                curPage: 1,
                total: null
            },
            latestData: null,
            pageSize: 6,
            pageNum: 1
        }
    },
    created() {
        //当前页面table展示信息
        this.getRepairInfos();
    },
    /*filters: {
        deviceType(val) {
            if (val == 1) {
                return '服务器'
            } else if (val == 2) {
                return '交换机'
            } else if (val == 3) {
                return '路由器'
            } else if (val == 4) {
                return '防火墙'
            } else if (val == 5) {
                return 'CPE'
            }
        },
        reState(val) {
            if (val == 0) {
                return '修复中'
            } else if (val == 1) {
                return '已修复'
            }
            } else if (val == 2) {
                return '全部'
            }
        }
    },*/
    methods: {
        getRepairInfos() {
            this.$http.post('/resman/repair/list',{
                'pageSize':this.pageSize,
                'pageNum': this.pageNum
            })
                .then((response) => {
                    if (response.code === 0) {
                        this.infos.tableData =  response.data.list;
                        this.pageConfig.total = response.data.total;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },

        //改变页数
        handleSizeChange(val){
            this.pageConfig.curPage = val;
            this.$http.post('/resman/repair/list',{
                'pageSize':this.pageSize,
                'pageNum': this.pageConfig.curPage
            })
                .then((response) => {
                    if (response.code === 0) {
                        this.infos.tableData  = response.data.list;
                        this.pageConfig.total = response.data.total;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        //分页   
        handleCurrentChange(val) {
            this.pageConfig.curPage = val;
            this.$http.post('/resman/repair/list',{
                'pageSize':this.pageSize,
                'pageNum': this.pageConfig.curPage
            })
                .then((response) => {
                    if (response.code === 0) {
                        this.infos.tableData  = response.data.list;
                        this.pageConfig.total = response.data.total;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },

        // changDate(val) {
        //     // console.log(val)
        //     var arr = val.split(' - ');
        //     this.selectInfo.beginDate=this.selectInfos.beginDate=arr[0];
        //     this.selectInfo.endDate=this.selectInfos.endDate=arr[1];
        // },


        // 筛选信息
        filterData() {
            this.selectInfos={
                'eqptType': this.selectInfo.eqptType,
                'snId': this.selectInfo.snId,
                'repairState': this.selectInfo.repairState,
                'beginDate': this.selectInfo.beginDate,
                'endDate': this.selectInfo.endDate,
                'pageSize': this.pageSize,
                'pageNum': this.pageNum
            }
            if(this.selectInfo.beginDate===''&&this.selectInfo.endDate==''){  
                this.selectInfo.beginDate=0;
                this.selectInfo.endDate=0;
                /*this.$alert('筛选日期不能为空', '提示', {
                confirmButtonText: '确定',
                });
                return;*/
            }
            if(this.selectInfo.eqptType==''||this.selectInfo.eqptType=='全部'){
                this.selectInfos.eqptType=0
                this.selectInfo.eqptType='全部';
            }
            if(this.selectInfo.repairState==''||this.selectInfo.repairState=='全部'){
                this.selectInfos.repairState=2
                this.selectInfo.repairState='全部';
            }

            this.$http.post('/resman/repair/select', this.selectInfo)
                .then((response) => {
                    if (response.code === 0) {
                        console.log(response.data.list);
                        this.infos.tableData  = response.data.list;
                        this.pageConfig.total = response.data.total;
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })                
            

        },
        // 创建报修记录
        createRepair() {
            this.resetForm();
            this.repairInfos.type = 'new';
            this.repairInfos.doChange = true;
            this.addRecordsVisible = true;
            // this.getRepairInfos();
        },
        // 编辑报修记录
        editEptRoom(info) {
            this.resetForm();
            this.repairInfos = JSON.parse(JSON.stringify(info));
            console.log(this.repairInfos)
            this.addRecordsVisible = true;
        },

        // 删除报修记录
        deleteConfirm(info) {
            const h = this.$createElement;
            this.$msgbox({
                title: '删除报修记录',
                message: h('p', null, [
                    h('span', null, '是否删除 '),
                    h('span', { style: 'color: #20A0FF;font-size:1.2em;font-weight:bold' }),
                    h('span', null, ' 这条报修记录？'),
                ]),
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '删除中...';
                        setTimeout(() => {
                            done();
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 100);
                        }, 400);
                    } else {
                        done();
                    }
                }
            }).then((action) => {
                if (action === 'confirm') {
                    this.eptRoomDelete(info.id);
                } else {
                    showMessage('已取消删除', 'info');
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        eptRoomDelete(Id) {
            this.$http.post('/resman/repair/delete', {
                "id": Id,
            }).then((response) => {
                if (response.code === 0) {
                    this.getRepairInfos();
                    this.showMessage('删除成功!', 'success');
                } else {
                    if (response.code === -1) {
                        console.log(response.statusText);
                    } else {
                        this.showWarning(response.msg, '删除失败');
                    }
                }
            }).catch((response) => {
                console.log(response)
            })


        },
        showMessage(msg, type) {
            this.$message({
                message: msg,
                type: type
            });
        },
        showWarning(msg, title) {
            this.$alert(msg, title, {
                showConfirmButton: false,
                showCancelButton: true,
                cancelButtonText: '关闭',
            });
        },
        //增加和修改
        submitForm(formName, type) {
            let _data = JSON.parse(JSON.stringify(this.repairInfos));
            _data.repairDate = this.repairInfos._repairDate;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (type == 'new') {
                        var url = '/resman/repair/add';
                        this.$http.post(url, _data).then((response) => {
                            if (response.code === 0) {
                                //console.log(_data)
                                this.addRecordsVisible = false;
                                this.getRepairInfos();
                                this.showMessage('创建成功!', 'success');
                            } else {
                                this.showWarning(response.msg, '创建失败');
                            }
                        }).catch((response) => {
                            console.log(response)
                        })
                    } else {
                        var url = '/resman/repair/update';
                        this.$http.post(url, _data).then((response) => {
                            if (response.code === 0) {
                                console.log(_data);
                                this.addRecordsVisible = false;
                                this.getRepairInfos();
                                this.showMessage('修改成功!', 'success');
                            } else {
                                this.showWarning(response.msg, '修改失败');
                            }
                        }).catch((response) => {
                            console.log(response)
                        })
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },


        //查询
        derive(){
            this.selectInfov={
                'eqptType': this.selectInfos.eqptType,
                'snId': this.selectInfos.snId,
                'repairState': this.selectInfos.repairState,
                'beginDate': this.selectInfos.beginDate,
                'endDate': this.selectInfos.endDate,
            }
            if(this.selectInfo.beginDate==''&&this.selectInfo.endDate==''){  
                this.selectInfov.beginDate=0;
                this.selectInfov.endDate=0;
            }
            if(this.selectInfo.eqptType=='全部'||this.selectInfo.eqptType==''){
                this.selectInfov.eqptType=0
            }
            if(this.selectInfo.repairState=='全部'||this.selectInfo.repairState==''){
                this.selectInfov.repairState=2
            }
            if(this.selectInfov.beginDate==0&&this.selectInfov.endDate==0&&this.selectInfov.eqptType==0&&this.selectInfov.repairState==2&&this.selectInfos.snId==''){
                window.location.href=process.env.BASE_API+'/resman/repair/export?snId=&eqptType=0&endDate=0&beginDate=0&repairState=2';
            }else{
                let _url=process.env.BASE_API+
                '/resman/repair/export?exportType=selete&eqptType='+this.selectInfov.eqptType+'&snId='+this.selectInfos.snId+'&repairState='+this.selectInfov.repairState+'&beginDate='+this.selectInfov.beginDate+'&endDate='+this.selectInfov.endDate;
                window.location.href=_url;             
            }

        },
        // 初始化
        resetForm() {
            this.latestData = this.repairInfos = {
                repairDate: '',
                snId: '',
                eqptType: '',
                repairState: '',
                solution: ''
            };
            this.addrDatas.facility = [];
            this.addrDatas.condition = [];
            // if (this.$refs['repairInfos']) {
            //     this.$refs['repairInfos'].resetFields();
            // }
        }
    }
};
</script>
